<template>
  <div class="newsAdd-container">
    <el-form ref="form"
             :model="form"
             :rules="rules"
             label-width="80px"
             class="editor-form">

      <el-form-item label="商品名称" prop="name">
        <el-input v-model="form.name"
                  placeholder="请输入标题..."></el-input>
      </el-form-item>

      <el-form-item label="商品分类">
        <el-select v-model="form.type" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="商品详情"  prop="content" class="Editor">
        <quill-editor v-model="form.content"
                     ref="myQuillEditor"
                     :options="editorOption"
                     @blur="onEditorBlur($event)"
                     @focus="onEditorFocus($event)"
                     @change="onEditorChange($event)">
        </quill-editor>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="addNews">发布</el-button>
        <el-button >清空</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
import axios from 'axios';
import {mapState} from 'vuex'
import { quillEditor } from 'vue-quill-editor'
export default {
    name:'addNews',
    component:{
      quillEditor
    },
    data(){
      return {
        content:'',
        editorOption:{},
        rules:{
          name: [
            { required: true, message: '请输入标题', trigger: 'blur' },
          ],
          content: [
            { required: true, message: '请输入内容', trigger: 'blur' }
          ],
        },
        options: [{
          value: 'music',
          label: '音乐周边'
        }, {
          value: 'movie',
          label: '电影周边'
        }, {
          value: 'book',
          label: '书籍周边'
        }],
        form:{
          username:this.$store.state.user.username,
          name:'',
          type:'music',
          content:''
        }
      }
    },
    computed: {
      ...mapState(['user','showUserDialog','isLogin']),
    },
    methods: {
      // eslint-disable-next-line no-unused-vars
      onEditorBlur(val) {//失去焦点事件
      },
      // eslint-disable-next-line no-unused-vars
      onEditorFocus(val) {//获得焦点事件
      },
      // eslint-disable-next-line no-unused-vars
      onEditorChange(val) {//内容改变事件
      },
      addNews(){
        if (!this.user.id){
                this.$message.error('请登录后再发布商品喔~')
            }else if(!this.form.content || !this.form.name){
                this.$message.error('请输入完整你的商品详情喔~')
            }else{
            axios.post('/api/addNews',{...this.form}).then(res =>{
              if(!res.data){
                this.$message.error("发布失败了！！！");
              }else{
                  this.$message({
                    type:'success',
                    message:'恭喜你！发布成功！'
                  })
                  this.$router.push({name:'newsItems'})
              }
            })
        }
      }
    }
}
</script>

<style lang="scss" scoped>
    .newsAdd-container{
      padding: 20px 0;
      width: 970px;
      margin: 0 auto;   
    }
</style>


// 另加样式 -----使内容的编辑框高撑开
<style lang="scss">
  .newsAdd-container{
    .ql-toolbar{
      span{
        line-height: 24px;
      }
    }
    .ql-container{
      min-height: 240px;
      overflow-y: scroll;
    }
  }
</style>